<template>
  <view class="h-home">
    <!-- 轮播 -->
    <view class="swiper-wrap">
      <swiper
        class="banner-box"
        autoplay="true"
        interval="3000"
        duration="500"
        previous-margin="50rpx"
        next-margin="50rpx"
        @change="bannerChange"
      >
        <block v-for="(item, index) in bannerData" :key="item.id">
          <swiper-item>
            <view class="img-wrap">
              <image
                :class="['banner', currentIndex == index ? 'active' : '']"
                :src="item.src"
                mode="aspectFill"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <!-- 分类 -->
    <view class="cates rbox box_space_b">
      <view
        :class="item.bgColor"
        class="item cobx"
        v-for="(item, idx) in cates"
        :key="idx"
        @tap="goPage(item.url)"
      >
        <text class="tit">{{ item.tit }}</text>
        <view class="sub rbox box_space_b">
          <view class="info cbox boxf_1">
            <text>{{ item.sub_a }}</text>
            <text>{{ item.sub_b }}</text>
          </view>
          <view class="img-wrap">
            <image :src="item.img" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- icon列表 -->
    <view class="cate-list rbox_wrap">
      <view
        class="item cbox box_y_center"
        v-for="(item, idx) in cateList"
        :key="idx"
        @tap="goPage(item.url)"
      >
        <image class="icon" mode="aspectFill" :src="item.img"></image>
        <text class="tit">{{ item.tit }}</text>
      </view>
    </view>
    <!-- 公告 -->
    <screenTextScroll :list="msgList" />
    <!-- tab列表 -->
    <view class="list-wrap">
      <view class="tab-title rbox box_y_center">
        <view
          v-for="(item, index) in items"
          :key="index"
          :class="['name', { btna: count == index }]"
          @tap="change(index)"
        >
          {{ item }}
        </view>
        <view class="more rbox box_y_center">
          <text>更多</text>
          <view class="iconfont icon-arrow-right"></view>
        </view>
      </view>
      <view class="tab-cont" :class="{ dis: btnnum == 0 }">
        <view class="cont-list cbox">
          <view class="cont-item rbox">
            <view class="info cbox boxf_1">
              <text class="tit">霜霉病是如何产生的，霜霉病是如何产生的。</text>
              <view class="sub rbox box_space_b">
                <text class="name">张专家</text>
                <text class="num">60 已读</text>
              </view>
            </view>
            <view class="img-wrap"></view>
          </view>
        </view>
      </view>
      <view class="tab-cont" :class="{ dis: btnnum == 1 }">1信息 </view>
      <view class="tab-cont" :class="{ dis: btnnum == 2 }">2信息 </view>
    </view>
  </view>
</template>
<script>
import screenTextScroll from '../../../components/screenTextScroll/screenTextScroll.vue'
export default {
  components: {
    screenTextScroll
  },
  data() {
    return {
      bannerData: [ // 轮播
        {
          src: '../../../static/home/banner01.jpg',
          id: 0
        },
        {
          src: '../../../static/home/banner02.jpeg',
          id: 1
        },
        {
          src: '../../../static/home/banner03.jpeg',
          id: 2
        },
      ],
      currentIndex: 0, // 轮播
      cates: [ // 分类
        {
          tit: '病虫害知识库',
          sub_a: '安全风险',
          sub_b: '提前预警',
          img: '../../../static/home/cate01.png',
          bgColor: 'green',
          url: 'pestWiki'
        },
        {
          tit: '病害诊断',
          sub_a: '专业气象',
          sub_b: '实时同步预警',
          img: '../../../static/home/cate02.png',
          bgColor: 'blue',
          url: 'diseaseDiagnosis'
        }
      ],
      cateList: [
        {
          url: 'warnRange',
          img: '../../../static/home/icon01.png',
          tit: '预警分布'
        },
        {
          url: 'diseaseReport',
          img: '../../../static/home/icon02.png',
          tit: '病害上报'
        },
        {
          url: 'diseaseInspection',
          img: '../../../static/home/icon03.png',
          tit: '病害送检'
        },
        {
          url: 'earlyWarn',
          img: '../../../static/home/icon04.png',
          tit: '预警科普'
        }
      ],
      msgList: ['实时预警，请订阅最新相关动态信息！'],
      btnnum: 0,
      items: ["基本信息", "公告信息", "换区信息"],
      count: "",
    }
  },
  mounted() {

  },
  methods: {
    bannerChange: function (e) {
      let current = e.detail.current
      this.currentIndex = current
    },
    change(e) {
      this.count = e
      this.btnnum = e
      console.log(this.count)
    },
    goPage(url) {
      if (url) {
        wx.navigateTo({
          url: `/pages/${url}/${url}`
        })
      }
    }
  }
}
</script>

<style lang="scss">
.h-home {
  .swiper-wrap {
    position: relative;
    border-bottom: 1px solid #f6f8fc;
    .banner-box {
      height: 190px;
      .img-wrap {
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        zoom: 1;
        &::after {
          display: table;
          content: "";
          clear: both;
        }
        .banner {
          margin-top: 15px;
          overflow: hidden;
          height: 158px;
          transition: transform 500ms;
          transform: scale(0.95, 0.9);
          border-radius: 8px;
          &.active {
            transform: scale(1, 1);
          }
        }
      }
    }
  }
  .cates {
    padding: 0 44rpx;
    .item {
      padding: 18rpx 30rpx;
      width: 316rpx;
      height: 176rpx;
      border-radius: 30rpx;
      &.green {
        background-color: #6ccea9;
      }
      &.blue {
        background-color: #72a4db;
      }
      .tit {
        font-size: 40rpx;
        line-height: 1;
        color: #fff;
      }
      .sub {
        margin-top: 10rpx;
        .info {
          text {
            font-size: 28rpx;
            line-height: 1.3;
            color: #fff;
          }
        }
        .img-wrap {
          width: 72rpx;
          height: 72rpx;
          background-color: #fff;
          image {
            width: 72rpx;
            height: 72rpx;
          }
        }
      }
    }
  }
  .cate-list {
    margin-top: 30rpx;
    padding: 0 50rpx;
    .item {
      width: 25%;
      .icon {
        width: 102rpx;
        height: 102rpx;
      }
      .tit {
        margin-top: 12rpx;
        font-size: 30rpx;
        line-height: 1;
        color: #656565;
      }
    }
  }
  .list-wrap {
    margin-top: 4rpx;
    .tab-title {
      padding: 18rpx 42rpx;
      border-bottom: 1rpx solid #ebebeb;
      .more {
        position: absolute;
        right: 42rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22rpx;
        color: #b4b4b4;
        .iconfont {
          font-size: 20rpx;
          color: #b4b4b4;
        }
      }
      .name {
        position: relative;
        font-size: 28rpx;
        color: #333;
        &:not(:first-child) {
          margin-left: 60rpx;
        }
        &.btna {
          color: #1de1c3;
          &::after {
            position: absolute;
            bottom: -18rpx;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            width: 80rpx;
            height: 6rpx;
            background: #1de1c3;
          }
        }
      }
    }
    .tab-cont {
      display: none;
      &.dis {
        display: block;
      }
    }
  }
  .cont-list {
    padding: 0 42rpx;
    .cont-item {
      padding: 36rpx 0 30rpx;
      &:not(:last-child) {
        border-bottom: 1rpx solid #e4e4e4;
      }
      .info {
        .tit {
          font-size: 32rpx;
          line-height: 1.2;
          color: #656565;
        }
        .sub {
          margin-top: auto;
          .name {
            font-size: 24rpx;
            line-height: 1;
            color: #b5b5b5;
          }
          .num {
            font-size: 24rpx;
            line-height: 1;
            color: #b5b5b5;
          }
        }
      }
      .img-wrap {
        margin-left: 40rpx;
        width: 208rpx;
        height: 148rpx;
        background-color: #dbc2c2;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
